<template>
  <el-form ref="userVipPhotoForm" :model="editFormData" label-width="0px" class="approveInfo">
    <div class="single-box">
      <h3>会员相册</h3>
      <div class="content">
        <el-descriptions :column="2" size="small" :labelStyle="{ width: '100px' }" :border="true">
          <el-descriptions-item :span="2">
            <template slot="label">相册</template>
            <el-form-item prop="albumImageList" class="albumImageList">
              <template v-if="fileListMap['albumImageList'].length">
                <img v-for="(item, index) in fileListMap['albumImageList']" :key="index" :src="item.url" class="avatar" />
              </template>
              <el-upload
                ref="vipImageUpload"
                :file-list="fileListMap['albumImageList']"
                list-type="picture-card"
                multiple
                accept=".jpg, .png"
                :limit="5"
                :headers="uploadOption.headers"
                :action="uploadOption.url"
                :show-file-list="false"
                class="avatar-uploader"
                :before-upload="beforeUploadAction"
                :on-success="
                  (data, file, fileList) =>
                    handleFileSuccess(
                      {
                        prop: 'albumImageList',
                      },
                      data,
                      { file, fileList },
                    )
                "
              >
                <i class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
    <div class="single-box">
      <h3>认证信息</h3>
      <div class="content">
        <table :border="1" cellspacing="0" cellpadding="0" class="table table-bordered">
          <thead>
            <tr>
              <th>类型</th>
              <th>认证</th>
              <th>证件</th>
              <th>状态</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in editFormMap" :key="index">
              <td class="column1">{{ item.approveType }}</td>
              <td class="column2">
                <el-form-item
                  v-for="(editItem, editIndex) in item.approveForm"
                  :key="editIndex"
                  :label="editItem.label"
                  :label-width="editItem.width + 'px' || '130px'"
                  :class="editItem.customClass || ''"
                >
                  <template v-if="editItem.type === 'select'">
                    <el-select
                      v-model="editFormData[item.approveFormName][editItem.prop]"
                      :disabled="editItem.disabled"
                      :readonly="editItem.readonly"
                      :filterable="editItem.filterable"
                      :clearable="editItem.clearable"
                      :placeholder="'请选择' + editItem.label"
                      @change="changeAction($event, editItem)"
                    >
                      <el-option
                        v-for="(optionItem, optionIndex) in optionListMap[editItem.linkOptionProp || editItem.prop]"
                        :key="optionIndex"
                        :label="optionItem[editItem.optionLabel || editItem.optionLabelText || 'label']"
                        :value="optionItem[editItem.optionValue || 'value']"
                      ></el-option>
                    </el-select>
                  </template>
                  <template v-else>
                    <el-input
                      v-model="editFormData[item.approveFormName][editItem.prop]"
                      :disabled="editItem.disabled"
                      :readonly="editItem.readonly"
                      :clearable="editItem.clearable"
                      :placeholder="'请输入' + editItem.label"
                      @input="inputAction(editItem.prop)"
                    ></el-input>
                  </template>
                </el-form-item>
              </td>
              <td class="column3">
                <el-form-item
                  v-for="(editItem, editIndex) in item.approvePhoto"
                  :key="editIndex"
                  :prop="editItem.prop"
                  :label-width="editItem.width + 'px' || '130px'"
                  class="approvePhoto"
                >
                  <template slot="label">
                    <span>
                      {{ editItem.label }}
                      <el-popover v-if="['frontImage', 'backImage'].includes(editItem.prop)" placement="top" trigger="hover">
                        <div class="upload-idCard">
                          <img v-if="editItem.prop === 'frontImage'" src="@/assets/images/zhengmian.jpg" style="display: block; width: 150px; height: 90px" />
                          <img v-if="editItem.prop === 'backImage'" src="@/assets/images/fanmian.jpg" style="display: block; width: 150px; height: 90px" />
                        </div>
                        <i class="el-icon-question cursorLink" slot="reference"></i>
                      </el-popover>
                    </span>
                  </template>
                  <template v-if="editItem.type === 'upload'">
                    <el-upload
                      :ref="item.approveId + '-' + editItem.prop + '-upload'"
                      :file-list="fileListMap[editItem.prop]"
                      accept=".jpg, .png"
                      :multiple="false"
                      :limit="1"
                      :headers="uploadOption.headers"
                      :action="uploadOption.url"
                      :show-file-list="false"
                      :before-upload="beforeUploadAction"
                      :on-success="
                        (data, file, fileList) =>
                          handleFileSuccess(
                            {
                              approveFormName: item.approveFormName,
                              ...editItem,
                            },
                            data,
                            { file, fileList },
                          )
                      "
                      class="avatar-uploader"
                    >
                      <img v-if="editFormData[item.approveFormName][editItem.prop]" :src="editFormData[item.approveFormName][editItem.prop]" class="avatar" />
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                  </template>
                </el-form-item>
              </td>
              <td class="column4">
                <el-form-item v-for="(editItem, editIndex) in item.approveStatus" :key="editIndex" :prop="editItem.prop">
                  <template v-if="editItem.type === 'radio'">
                    <el-radio-group v-model="editFormData[item.approveFormName][editItem.prop]">
                      <el-radio
                        v-for="(optionItem, optionIndex) in getSimpleOption(editItem.optionKey)"
                        :key="optionIndex"
                        :label="optionItem[editItem.optionValue || 'value']"
                      >
                        {{ optionItem[editItem.optionLabel || editItem.optionLabelText || 'label'] }}
                      </el-radio>
                    </el-radio-group>
                  </template>
                </el-form-item>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </el-form>
</template>
<script>
import debounce from 'lodash/debounce';
import { getToken } from '@/utils/auth';
// import setEditForm from '@/static/mixin/setEditForm';
import { getSimpleOption } from '@/static/js/dataSource';
export default {
  name: 'ApproveInfo',
  // mixins: [setEditForm],
  props: {
    editFormData: {
      type: Object,
      default: () => {
        return {};
      },
    },
    editFormMap: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
  watch: {
    editFormData: {
      handler(data) {
        const keyArr = [];
        this.editFormMap.map((item) => {
          item.approvePhoto.map((photoItem) => {
            if (photoItem.type === 'upload') {
              keyArr.push({ formName: item.approveFormName, formKey: photoItem.prop });
            }
          });
        });
        keyArr.map((item) => {
          if (data[item.formName]) {
            const url = data[item.formName][item.formKey];
            if (url) {
              this.fileListMap[item.formKey].push({
                url,
                name: url.slice(url.lastIndexOf('/') + 1, url.lastIndexOf('.')),
              });
            }
          }
        });
      },
      deep: true,
      immediate: true,
    },
  },
  data() {
    return {
      optionListMap: {},
      // 会员相册
      albumImageList: [],
      fileListMap: {
        albumImageList: [],
        frontImage: [],
        backImage: [],
        eduImages: [],
        salaryImages: [],
        carImages: [],
        houseImages: [],
      },
      // 上传参数
      uploadOption: {
        // 设置上传的请求头部
        headers: { Authorization: 'Bearer ' + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + '/file/alibyunupLoadFile',
      },
    };
  },
  methods: {
    // 所有下拉组件的全局事件
    changeAction(value, item) {
      this.$emit('changeAction', { ...item });
    },
    inputAction: debounce(function (prop) {
      this.$emit('inputAction', { prop });
    }, 1000),
    getSimpleOption(optionKey) {
      return getSimpleOption(optionKey);
    },
    beforeUploadAction(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isLt2M;
    },
    handleFileSuccess({ approveFormName, prop, fileListProp }, { data, msg }, { file, fileList }) {
      if (prop === 'albumImageList') {
        this.fileListMap['albumImageList'] = fileList;
        this.albumImageList.push(data);
      } else {
        this.fileListMap[prop] = fileList;
        this.editFormData[approveFormName][prop] = data;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.approveInfo {
  & ::v-deep .el-form-item,
  & ::v-deep .el-select {
    width: 100%;
    display: flex;
  }
  & ::v-deep .el-form-item__label {
    width: 120px;
    & > span {
      display: flex;
      justify-content: flex-end;
      width: 100%;
    }
    i {
      margin-left: 5px;
    }
  }
  & ::v-deep .el-radio {
    margin-bottom: 10px;
  }
  & ::v-deep .el-form-item .el-form-item__content {
    width: calc(100% - 130px);
  }
  & ::v-deep .el-form-item.approvePhoto .el-form-item__label {
    width: 150px;
    margin-right: 15px;
    display: flex;
    align-items: center;
  }
  & ::v-deep .el-form-item.approvePhoto .el-form-item__content {
    width: 70px;
  }
  & ::v-deep .el-form-item.albumImageList .el-form-item__content {
    display: flex;
  }
  // input提示框保留换行符\n
  & ::v-deep .el-input::placeholder {
    white-space: pre-wrap;
  }
  & ::v-deep .el-upload--picture-card {
    width: 70px;
    height: 70px;
    line-height: 70px;
    text-align: center;
    border: 1px dashed #eee;
  }
  & ::v-deep .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  & ::v-deep .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .single-box {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 1px solid #f4f4f4;
    h3 {
      color: #333333;
      background-color: #f5f5f5;
      border-color: #ddd;
      font-size: 14px;
      padding: 10px 15px;
      margin: 0;
    }
    .content {
      padding: 15px;
      .column1 {
        text-align: center;
        width: 15%;
      }
      .column2 {
        padding-top: 10px;
        padding-right: 10px;
        width: 40%;
      }
      .column3 {
        width: 30%;
        padding-top: 10px;
      }
      .column4 {
        width: 15%;
        padding-left: 10px;
      }
    }
  }
  .table {
    width: 100%;
    max-width: 100%;
  }
  .table-bordered,
  .table-bordered > thead > tr > th {
    padding: 5px;
  }
  .table-bordered {
    border: 0;
  }
  .table-bordered > thead > tr > th,
  .table-bordered > tbody > tr > td {
    border: 1px solid #f4f4f4;
  }
  .table-bordered > tbody > tr:nth-of-type(odd) {
    background-color: #f9f9f9;
  }
  .avatar-uploader-icon {
    font-size: 24px;
    color: #8c939d;
    width: 70px;
    height: 70px;
    line-height: 70px;
    text-align: center;
    border: 1px dashed #eee;
  }
  .avatar-uploader,
  .avatar {
    width: 70px;
    height: 70px;
    display: inline-block;
  }
  .avatar-uploader {
    & ::v-deep .el-upload {
      width: 100%;
      height: 100%;
    }
  }

  .avatar + .avatar {
    margin-left: 10px;
  }
}
</style>
